<template>
<!-- 定义视频源 -->
    <div class="videoplayer">
        <div class="dmList" id="dmList" >
        <video ref="myvideo" @canplay="getTotal" @timeupdate="timeUpdate" @mouseenter="showControls">
            <!-- <source src="https://video.pearvideo.com/mp4/short/20211204/cont-1558335-15801442-hd.mp4">  -->
        <source :src="src"/>
        </video>
        </div>

         <!-- 动画部分 -->
        <transition 
            enter-active-class="animated fadeIn slow"
            leave-active-class="animated fadeOut slow"
        >

            <!-- 控制播放部分 -->
            <div class="controls" v-show="isShow">

                <!-- 左边部分 -->
                <div class="con_left">
                <!-- 播放与暂停 -->
                    <span :class="{'icon-play3':!isPaused,'icon-pause2':isPaused}" @click="togglePlay"></span>

                    <!-- 停止按钮 -->
                    <span class="icon-stop2" @click="stopPlay">
                    </span>

                    <!-- 播放时间/总时长 -->
                    <span>{{currentTime}}/{{totalTime}}</span>

                     <!-- 颜色选择器 -->
                    <span class="danmu-color">
                        <input type="color" id="textColor">
                    </span>

                    <!-- 弹幕发送框 -->
                    <span class="danmu-input">
                        <input type="text" id="text">
                    </span>

                    <!-- onclick="sendDanmu()" -->
                    <span class="danmu-btn" @click="sendDanmu()">发送弹幕</span>
                </div>

                <div class="con_right">
                
                <!-- 右边部分 -->

                    <!-- 声音 -->
                    <span :class="{'icon-volume-medium':!isMuted,'icon-volume-mute2':isMuted}" @click="toggleMuted"></span>
                  
                    <!-- 全屏 -->
                    <span class="icon-loop" @click="toggleFullScreen"></span>
                </div>
            </div>
    </transition>

</div>
</template>

<script>
// 引入样式文件
import "animate.css";
import '../styles/style.css'

// 导出文件
export default{
    // 定义props属性，用于接收父组件所传递过来的数据
    name:'videoplayer',
    props:["src"],
    data(){
        return{
            myvideo:null,

            //当前的播放状态
            isPaused:false,

            //当前是否静音
            isMuted:false,

            //当前播放时间
            currentTime:"00:00",

            //总时长
            totalTime:"00:00",

            //控制面板是否可见
            isShow:true,

            //startTime,开始时间，以毫秒做为单位
            startTime:0,

           
        };
    },
    mounted(){
            //获取播放器元素
            this.myvideo =this.$refs.myvideo;

            //记住起始的时间，这个时间作为时间间隔的参照
            this.startTime =Date.now()

            //开一个定时器
            setInterval(()=>{
                if(Date.now() - this.startTime > 10000){
                    this.isShow = false
                }
            },1000);
    },
    methods:{
        //播放与暂停
        togglePlay(){
            //视频标签原生方法，play():让视频播放 pause():让视频暂停 
            //修改当前的播放状态
            this.isPaused = !this.isPaused;
            if(this.isPaused){
                    this.myvideo.play();
            }else{
                this.myvideo.pause();
            }
        },

        //停止  播放

        stopPlay(){
            //没有原生stop方法，用pause()实现
            this.myvideo.pause();

            //currentTime用来标记当前视频播放到的时间，以秒做单位
            this.myvideo.currentTime = 0;

            //重置播放状态
            this.isPaused=false;
        },

        //时间格式化处理
        timeFormat(time){
            let minute = Math.floor((time % 3600)/60);
            let second = Math.floor(time % 60);
            minute = minute < 10 ? "0" + minute : minute;
            second = second < 10 ? "0" + second :second;
            return `${minute} : ${second}`;
        },

        //获取总时长
        getTotal(){
            this.totalTime = this.timeFormat(this.myvideo.duration);
        },

        //获取当前视频播放到的时间
        timeUpdate(){
            this.currentTime = this.timeFormat(this.myvideo.currentTime)
        },

        //静音操作
        toggleMuted(){
            this.isMuted = !this.isMuted;
            this.myvideo.muted = !this.myvideo.muted;
        },

        //全屏切换
        toggleFullScreen(event){
            const myvideo = this.$refs.myvideo;

            //如果当前时全屏状态，就退出全屏，否则进入全屏状态
            //获取当前的全屏状态
            let isFullscreen = document.webkitIsFullScreen || document.fullscreen;
            if(!isFullscreen){
                const inFun = myvideo.requestFullscreen || myvideo.webkitRequestFullScreen;

                //让整个播放器进入全屏状态
                inFun.call(myvideo);
            }else{
                const exitFun = document.exitFullscreen || document.webkitExitFullscreen;

                //退出全屏状态需要用document
                exitFun.call(document);
            }
        },

   //显示控制面板
        showControls(){
            this.isShow =true,

            //更新起始时间的参照时间
            this.startTime = Date.now()
        },

        // 弹幕
        sendDanmu(){
            var dmList = document.getElementById('dmList');
            
             // 获取输入框的值
            var text = document.getElementById("text").value;
            console.log(text);
                
            //创建元素
            var p = document.createElement("p");
            
            //设置P标签的内容
            p.innerText = text;
            
            // 给p标签添加msg类
            p.setAttribute("class","msg");
            // p.classList.add('msg'); //添加类名
            // p.style.cssText = "width:10px;height:10px;border:solid 1px red;";
            // p.setAttribute("style","width:10px;height:10px;border:solid 1px red;") ;

           //把弹幕添加到页面上
             dmList.appendChild(p);
            //  p.style.background="red";
             
            //设置弹幕的随机高度
            var h = Math.random()*200;
            p.style.top = h + "px";
            

            // 获取颜色选择器的值
            var color = document.getElementById("textColor").value;
            p.style.color = color;

            // p.style.width="100px"
            //设置输入框为空
             document.getElementById("text").value = ""
            // console.log(p);
        },
    }
}
</script>

<style>
 .dmList{
    position: relative;
    width:1000px;
    height:600px;
    margin: 0 auto;
    /* overflow: hidden; */
    /* background-color:red; */
    }

.dmList>video{
        width:100%;
        height:100%;
        position: relative;
        object-fit: fill;
    }

    .controls{
        position: absolute;
        left:247px;
        /* bottom:0; */
        width:1000px;
        height: 40px;
        background:rgba(0,0,0,0.5);
        display: flex;
        justify-content: space-between; /* 均匀*/
        align-items: center;
    }
        span{
            padding:0 5px;
            color: #fff;
            font-size: 20px;
        } 

   .msg{
        /* display: flex;
        -webkit-text-stroke: 1px black; */
        /* 设置弹幕最终停留的位置 */
        /* transform: translateX(600px); */
        position: absolute;
        top:0;
        background-color: green;
        /* font-weight: 800;
        -webkit-text-stroke: 1px black;
        animation: danmu  6s linear;  */
        
    }   


    /* 从左到右的关键动画 */ 
     @keyframes danmu{
        from{
            transform: translateX(0px)
        }to{
            transform: translateX(600px)
        }
    }
    

    .danmu-input input{
        display: inline-block; 
        /* margin-top: -20px; */
        width: 150px;
        height: 25px;
        border: 1.5px solid gainsboro;
        background-color: transparent;
    }

    .danmu-btn{
        display: inline-block;
        width: 70px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 16px;
        border-radius: 10px;
        background-color: skyblue;
        cursor: pointer;
    }
</style>